<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笔记详情 - SimpleNote</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 添加代码高亮样式 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/11.7.0/styles/github.min.css">
    <!-- 添加marked.js用于Markdown解析 -->
    <script src="https://cdn.staticfile.org/marked/4.3.0/marked.min.js"></script>
    <!-- 添加highlight.js用于代码高亮 -->
    <script src="https://cdn.staticfile.org/highlight.js/11.7.0/highlight.min.js"></script>
    <!-- 添加MathJax支持数学公式 -->
    <script id="MathJax-script" async src="https://cdn.staticfile.org/mathjax/3.2.2/es5/tex-mml-chtml.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
            -webkit-font-smoothing: antialiased;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            font-size: 16px;
        }
        
        /* 顶部导航栏 */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background-color: #fff;
            border-bottom: 1px solid #eee;
            position: relative;
            z-index: 100;
        }
        
        .header .left a {
            color: #333;
            font-size: 16px;
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        
        .header .left a i {
            margin-right: 5px;
        }
        
        .header .center {
            font-weight: 600;
            font-size: 18px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
        }
        
        /* 主内容区域 */
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 笔记标题样式 */
        .note-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 10px;
            line-height: 1.3;
            color: #222;
        }
        
        /* 笔记元数据样式 */
        .note-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .note-author {
            font-size: 14px;
            color: #666;
        }
        
        .note-author strong {
            color: #444;
        }
        
        .note-date {
            font-size: 14px;
            color: #888;
        }
        
        /* 笔记内容样式 */
        .note-content {
            background-color: #fff;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            line-height: 1.8;
        }
        
        /* 增强代码块和内联代码样式 */
        .note-content pre {
            background-color: #f6f8fa;
            border-radius: 8px;
            padding: 16px;
            margin: 16px 0;
            overflow: auto;
            position: relative;
            border: 1px solid #e1e4e8;
        }
        
        .note-content pre::before {
            content: attr(data-lang);
            position: absolute;
            top: 0;
            right: 12px;
            font-size: 12px;
            color: #aaa;
            padding: 2px 8px;
            background: #f8f8f8;
            border-radius: 0 0 4px 4px;
            border: 1px solid #e1e4e8;
            border-top: none;
        }
        
        .note-content code {
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            background-color: rgba(27, 31, 35, 0.05);
            border-radius: 3px;
            font-size: 85%;
            margin: 0;
            padding: 0.2em 0.4em;
            color: #24292e;
        }
        
        .note-content pre code {
            background: none;
            padding: 0;
            border-radius: 0;
            margin: 0;
            white-space: pre;
            color: inherit;
            font-size: 14px;
            line-height: 1.5;
            word-break: normal;
            overflow-x: auto;
        }
        
        /* 表格样式增强 */
        .note-content table {
            border-spacing: 0;
            border-collapse: collapse;
            margin: 16px 0;
            width: 100%;
            overflow: auto;
            display: block;
        }
        
        .note-content table th,
        .note-content table td {
            padding: 8px 13px;
            border: 1px solid #dfe2e5;
        }
        
        .note-content table tr {
            background-color: #fff;
            border-top: 1px solid #c6cbd1;
        }
        
        .note-content table tr:nth-child(2n) {
            background-color: #f6f8fa;
        }
        
        .note-content table th {
            font-weight: 600;
            background-color: #f6f8fa;
        }
        
        /* 引用样式增强 */
        .note-content blockquote {
            background-color: #f8f9fa;
            border-left: 4px solid #007bff;
            padding: 12px 16px;
            color: #444;
            font-style: italic;
            margin: 16px 0;
            border-radius: 0 4px 4px 0;
        }
        
        .note-content blockquote > :first-child {
            margin-top: 0;
        }
        
        .note-content blockquote > :last-child {
            margin-bottom: 0;
        }
        
        /* 任务列表样式 */
        .note-content ul.contains-task-list {
            padding-left: 0;
            list-style-type: none;
        }
        
        .note-content ul.contains-task-list li {
            padding-left: 24px;
            position: relative;
        }
        
        .note-content ul.contains-task-list input[type="checkbox"] {
            position: absolute;
            left: 0;
            top: 4px;
        }
        
        .note-content h1,
        .note-content h2,
        .note-content h3 {
            margin-top: 1.5em;
            margin-bottom: 0.8em;
            color: #333;
        }
        
        .note-content p {
            margin-bottom: 1em;
        }
        
        .note-content img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 15px 0;
        }
        
        .note-content ul,
        .note-content ol {
            padding-left: 1.5em;
            margin-bottom: 1em;
        }
        
        /* 笔记标签样式 */
        .note-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 25px;
        }
        
        .note-tags span {
            background-color: #e6f2ff;
            color: #007bff;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }
        
        /* 互动统计样式 */
        .note-stats {
            display: flex;
            justify-content: space-around;
            background-color: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }
        
        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }
        
        .stat-item .value {
            font-size: 18px;
            font-weight: 700;
            color: #333;
        }
        
        .stat-item .label {
            font-size: 14px;
            color: #888;
        }
        
        /* 操作按钮样式 */
        .note-actions {
            display: flex;
            justify-content: space-around;
            margin-top: 25px;
            padding: 15px 0;
            border-top: 1px solid #eee;
        }
        
        .action-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            border: none;
            background: none;
            cursor: pointer;
            outline: none;
            color: #666;
        }
        
        .action-button i {
            font-size: 22px;
            color: #007bff;
        }
        
        .action-button.liked i {
            color: #ff4d4f;
        }
        
        .action-button.favorited i {
            color: #faad14;
        }
        
        /* 相关笔记样式 */
        .related-notes {
            margin-top: 40px;
        }
        
        .related-notes h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #333;
        }
        
        .related-notes .note-list {
            display: flex;
            overflow-x: auto;
            gap: 15px;
            padding-bottom: 10px;
            margin-bottom: 40px;
        }
        
        .related-notes .note-item {
            flex: 0 0 250px;
            border-radius: 10px;
            padding: 15px;
            background: #fff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }
        
        .related-notes .note-title {
            font-size: 16px;
            margin-bottom: 8px;
        }
        
        .related-notes .note-content {
            padding: 0;
            box-shadow: none;
            font-size: 14px;
            margin-bottom: 10px;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .related-notes .note-author {
            font-size: 12px;
        }
        
        .related-notes .note-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }
        
        .related-notes .note-tags {
            display: flex;
            gap: 5px;
        }
        
        .related-notes .note-tags span {
            background-color: #e6f2ff;
            color: #007bff;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 500;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            
            .note-title {
                font-size: 22px;
            }
            
            .note-content {
                padding: 20px;
            }
            
            .note-stats {
                padding: 15px;
            }
        }
        
        /* 底部间距 */
        .footer-spacer {
            height: 60px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="header">
        <div class="left">
            <a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
        </div>
        <div class="center">笔记详情</div>
    </div>
    
    <!-- 主内容容器 -->
    <div class="container">
        <!-- 笔记详情区域 -->
        <div id="note-detail">
            <!-- 笔记内容将通过JS动态加载 -->
            <div class="loading">
                <p>加载中...</p>
            </div>
        </div>
        
        <!-- 相关笔记 -->
        <div class="related-notes">
            <h3>相关笔记</h3>
            <div class="note-list" id="related-notes">
                <!-- 相关笔记将通过JS动态加载 -->
            </div>
        </div>
        
        <!-- 底部间距 -->
        <div class="footer-spacer"></div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 配置Marked选项
            marked.setOptions({
                breaks: true,                // 支持GitHub换行符
                gfm: true,                   // 启用GitHub风格Markdown
                headerIds: true,             // 为标题添加id
                mangle: false,               // 不转义标题中的HTML
                pedantic: false,             // 尽可能符合markdown.pl
                sanitize: false,             // 不过滤HTML标签
                smartLists: true,            // 使用更智能的列表行为
                smartypants: false,          // 使用更智能的标点符号
                xhtml: false,                // 使用自闭合标签
                highlight: function(code, lang) {
                    // 使用highlight.js来高亮代码
                    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
                    return hljs.highlight(code, { language }).value;
                }
            });
            
            // 自定义渲染器，添加语言标签
            const renderer = new marked.Renderer();
            renderer.code = function(code, language) {
                const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
                const highlightedCode = hljs.highlight(code, { language: validLanguage }).value;
                return `<pre data-lang="${validLanguage}"><code class="hljs language-${validLanguage}">${highlightedCode}</code></pre>`;
            };
            marked.use({ renderer });
            
            // 从URL获取笔记ID
            const urlParams = new URLSearchParams(window.location.search);
            const noteId = urlParams.get('id');
            
            if (!noteId) {
                showError('未找到笔记ID，请返回列表页重试');
                return;
            }
            
            // 从localStorage获取笔记数据
            const onlineNotesJson = localStorage.getItem('onlineNotes');
            
            if (!onlineNotesJson) {
                showError('未找到笔记数据，请返回列表页重试');
                return;
            }
            
            // 解析笔记数据
            try {
                const onlineNotes = JSON.parse(onlineNotesJson);
                const note = onlineNotes.find(note => note.id === noteId);
                
                if (!note) {
                    showError('未找到指定ID的笔记，请返回列表页重试');
                    return;
                }
                
                // 渲染笔记详情
                renderNoteDetail(note);
                
                // 渲染相关笔记（根据标签匹配）
                renderRelatedNotes(note, onlineNotes);
                
            } catch (err) {
                console.error('解析笔记数据出错:', err);
                showError('处理笔记数据时出错，请刷新页面重试');
            }
        });
        
        // 渲染笔记详情
        function renderNoteDetail(note) {
            const noteDetailEl = document.getElementById('note-detail');
            
            // 更新文档标题
            document.title = `${note.title} - SimpleNote`;
            
            noteDetailEl.innerHTML = `
                <h1 class="note-title">${note.title}</h1>
                
                <div class="note-meta">
                    <div class="note-author">
                        <strong>作者:</strong> ${note.author}
                    </div>
                    <div class="note-date">
                        <i class="far fa-calendar-alt"></i> ${note.publishedAt}
                    </div>
                </div>
                
                <div class="note-tags">
                    ${note.tags.map(tag => `<span>${tag}</span>`).join('')}
                </div>
                
                <div class="note-content">
                    ${marked.parse(note.content)}
                </div>
                
                <div class="note-stats">
                    <div class="stat-item">
                        <div class="value">${note.likes}</div>
                        <div class="label">点赞</div>
                    </div>
                    <div class="stat-item">
                        <div class="value">${note.favorites}</div>
                        <div class="label">收藏</div>
                    </div>
                    <div class="stat-item">
                        <div class="value">${note.downloads}</div>
                        <div class="label">下载</div>
                    </div>
                </div>
                
                <div class="note-actions">
                    <button class="action-button" id="btn-like">
                        <i class="far fa-thumbs-up"></i>
                        <span>点赞</span>
                    </button>
                    <button class="action-button" id="btn-favorite">
                        <i class="far fa-star"></i>
                        <span>收藏</span>
                    </button>
                    <button class="action-button" id="btn-download">
                        <i class="fas fa-download"></i>
                        <span>下载</span>
                    </button>
                    <button class="action-button" id="btn-share">
                        <i class="fas fa-share-alt"></i>
                        <span>分享</span>
                    </button>
                </div>
            `;
            
            // 添加交互事件
            setupInteractionEvents(note);
        }
        
        // 设置交互事件
        function setupInteractionEvents(note) {
            const likeBtn = document.getElementById('btn-like');
            const favoriteBtn = document.getElementById('btn-favorite');
            const downloadBtn = document.getElementById('btn-download');
            const shareBtn = document.getElementById('btn-share');
            
            // 点赞按钮
            likeBtn.addEventListener('click', function() {
                this.classList.toggle('liked');
                
                const icon = this.querySelector('i');
                if (this.classList.contains('liked')) {
                    icon.className = 'fas fa-thumbs-up';
                } else {
                    icon.className = 'far fa-thumbs-up';
                }
                
                // 更新点赞数（这里只是模拟效果，实际应有API调用）
                const likesElem = document.querySelector('.note-stats .stat-item:first-child .value');
                let likes = parseInt(likesElem.textContent);
                
                if (this.classList.contains('liked')) {
                    likesElem.textContent = likes + 1;
                } else {
                    likesElem.textContent = likes - 1;
                }
            });
            
            // 收藏按钮
            favoriteBtn.addEventListener('click', function() {
                this.classList.toggle('favorited');
                
                const icon = this.querySelector('i');
                if (this.classList.contains('favorited')) {
                    icon.className = 'fas fa-star';
                } else {
                    icon.className = 'far fa-star';
                }
                
                // 更新收藏数
                const favoritesElem = document.querySelector('.note-stats .stat-item:nth-child(2) .value');
                let favorites = parseInt(favoritesElem.textContent);
                
                if (this.classList.contains('favorited')) {
                    favoritesElem.textContent = favorites + 1;
                } else {
                    favoritesElem.textContent = favorites - 1;
                }
            });
            
            // 下载按钮
            downloadBtn.addEventListener('click', function() {
                alert('笔记已开始下载');
                
                // 更新下载数
                const downloadsElem = document.querySelector('.note-stats .stat-item:nth-child(3) .value');
                let downloads = parseInt(downloadsElem.textContent);
                downloadsElem.textContent = downloads + 1;
            });
            
            // 分享按钮
            shareBtn.addEventListener('click', function() {
                // 如果支持网页分享API
                if (navigator.share) {
                    navigator.share({
                        title: note.title,
                        text: note.content.replace(/<[^>]*>/g, '').substring(0, 100) + '...',
                        url: window.location.href
                    }).catch(err => {
                        console.error('分享失败:', err);
                    });
                } else {
                    // 否则显示基本分享提示
                    alert(`复制以下链接分享：${window.location.href}`);
                }
            });
        }
        
        // 渲染相关笔记
        function renderRelatedNotes(currentNote, allNotes) {
            const relatedNotesEl = document.getElementById('related-notes');
            
            // 基于标签匹配寻找相关笔记
            const relatedNotes = allNotes
                .filter(note => 
                    note.id !== currentNote.id && // 排除当前笔记
                    note.tags.some(tag => currentNote.tags.includes(tag)) // 至少有一个标签匹配
                )
                .slice(0, 4); // 最多展示4个相关笔记
                
            if (relatedNotes.length === 0) {
                // 如果没有相关笔记，展示最新的其他笔记
                const otherNotes = allNotes
                    .filter(note => note.id !== currentNote.id)
                    .sort((a, b) => new Date(b.publishedAt) - new Date(a.publishedAt))
                    .slice(0, 4);
                    
                renderRelatedNotesList(otherNotes, '最新笔记');
            } else {
                renderRelatedNotesList(relatedNotes);
            }
        }
        
        // 渲染相关笔记列表
        function renderRelatedNotesList(notes, title = '相关笔记') {
            const relatedNotesEl = document.getElementById('related-notes');
            document.querySelector('.related-notes h3').textContent = title;
            
            relatedNotesEl.innerHTML = '';
            
            notes.forEach(note => {
                const noteItem = document.createElement('div');
                noteItem.classList.add('note-item');
                
                // 提取笔记内容的纯文本预览，去除Markdown语法
                let contentPreview = note.content
                    .replace(/#+\s+/g, '') // 移除标题标记
                    .replace(/\*\*|\*|~~|__/g, '') // 移除强调标记
                    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // 移除链接，保留文本
                    .replace(/!\[([^\]]+)\]\([^)]+\)/g, '[图片]') // 替换图片
                    .replace(/```[\s\S]*?```/g, '[代码块]') // 替换代码块
                    .replace(/`([^`]+)`/g, '$1') // 移除行内代码标记
                    .replace(/\n/g, ' ') // 替换换行为空格
                    .substring(0, 100) + (note.content.length > 100 ? '...' : ''); // 裁剪长度
                
                noteItem.innerHTML = `
                    <h3 class="note-title">${note.title}</h3>
                    <div class="note-content">${contentPreview}</div>
                    <div class="note-meta">
                        <div class="note-author"><strong>作者:</strong> ${note.author}</div>
                        <div class="note-tags">
                            ${note.tags.slice(0, 2).map(tag => `<span>${tag}</span>`).join('')}
                        </div>
                    </div>
                `;
                
                // 添加点击事件
                noteItem.addEventListener('click', () => {
                    window.location.href = `note-detail.html?id=${note.id}`;
                });
                
                // 添加鼠标样式表明可点击
                noteItem.style.cursor = 'pointer';
                
                relatedNotesEl.appendChild(noteItem);
            });
        }
        
        // 显示错误信息
        function showError(message) {
            const noteDetailEl = document.getElementById('note-detail');
            noteDetailEl.innerHTML = `
                <div class="error-message" style="text-align: center; color: #ff4d4f; padding: 30px;">
                    <i class="fas fa-exclamation-circle" style="font-size: 36px; margin-bottom: 15px;"></i>
                    <p>${message}</p>
                    <a href="online-notes.html" style="display: inline-block; margin-top: 15px; color: #007bff; text-decoration: none;">
                        返回笔记列表
                    </a>
                </div>
            `;
            
            // 隐藏相关笔记区域
            document.querySelector('.related-notes').style.display = 'none';
        }
    </script>
</body>
</html> 